import type { FormProps } from 'antd'
import { Button, Form, Input, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { post } from '../../api/axios'
import './style.css'

type FieldType = {
  password?: string
}

const Login = () => {
  const navigate = useNavigate()
  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values)
    post('/api/login', values).then((res) => {
      if (res.data) {
        message.success('登录成功')
        navigate('/home', { replace: false })
      } else {
        message.error('登录失败')
      }
    })
  }

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  return (
    <div className="login-page">
      <Form name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off">
        <Form.Item<FieldType> label="密码" name="password" rules={[{ required: true, message: '请输入密码!' }]}>
          <Input.Password placeholder="请输入密码" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login
